<template>
  <div class="sells-wrapper" ref="sells">
    <div class="sells-header">
      <div class="header-top border-bottom">
        <div class="top-left">
          <h1 class="title">{{seller.name}}</h1>
          <div class="star-wrapper">
            <star :size="36" :score="seller.score"></star>
          </div>
          <span class="num">({{seller.ratingCount}})</span>
          <span class="count">月售{{seller.sellCount}}单</span>
        </div>
        <div class="like-food">
          <span class="iconfont commonlike"
                :class="{'like':ifLike}"
                @click="likeFood"
          >&#xe61a;</span>
          <div class="text" v-show="ifLike">已收藏</div>
          <div class="text" v-show="!ifLike">收藏</div>
        </div>
      </div>
      <div class="header-bottom">
        <div class="bottom">
          <span class="text">起送价</span>
          <div class="start-price">{{seller.minPrice}}<span class="text">元</span></div>
        </div>
        <div class="bottom">
          <span class="text">商家配送</span>
          <div class="start-price">{{seller.deliveryPrice}}<span class="text">元</span></div>
        </div>
        <div class="bottom">
          <span class="text">平均配送时间</span>
          <div class="start-price">{{seller.deliveryTime}}<span class="text">分钟</span></div>
        </div>
      </div>
    </div>
    <split></split>
    <div class="activity">
      <h1 class="title">公告与活动</h1>
      <p class="bulletin border-bottom">{{seller.bulletin}}</p>
      <ul class="detail-list">
        <li
          v-for="(item,index) in seller.supports"
          :key="index"
          class="detail-item border-bottom"
        >
          <span class="icon" :class="iconClassMap[item.type]"></span>
          <span class="text">{{item.description}}</span>
        </li>
      </ul>
    </div>
    <split></split>
    <div class="pics">
      <h1 class="title">商家实景</h1>
      <div class="pics-wrapper">
        <ul class="pic-list" ref="picList">
          <li class="pic-item" v-for="(pic,index) in seller.pics" :key="index">
            <img :src="pic" width="120" height="90">
          </li>
        </ul>
      </div>
    </div>
    <split></split>
    <div class="info">
      <h1 class="title border-bottom">商家信息</h1>
      <ul class="info-list">
        <li class="info-item border-bottom" v-for="(item,index) of seller.infos" :key="index">
          {{item}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Bscroll from 'better-scroll'
import Star from '../star/Star'
import Split from '../split/Split'
export default {
  name: 'Sells',
  data () {
    return {
      seller: {},
      ifLike: false
    }
  },
  components: {
    Star,
    Split
  },
  // watch: {
  //   'seller' () {
  //     this._initScroll()
  //     // this._initpicScroll()
  //   }
  // },
  // ready () {
  //   this._initScroll()
  //   // this._initpicScroll()
  // },
  methods: {
    likeFood () {
      this.ifLike = !this.ifLike
    },
    // _initScroll () {
    //   if (!this.scroll) {
    //     this.scroll = new Bscroll(this.$refs.sells, {
    //       click: true,
    //       // eventPassthrough: 'vertical'
    //     })
    //   } else {
    //     this.scroll.refresh()
    //   }
    // },
    picScroll () {
      if (this.seller.pics) {
        let picwidth = 120
        let margin = 6
        let width = (picwidth + margin) * seller.pics.length - margin
        this.$refs.picList.style.width = width + 'px'
        this.picScroll = new Bscroll(this.$refs.sells, {
          click: true
        })
      }
    }
  },
  created () {
    this.iconClassMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
    axios.get('/static/mock/data.json').then((res) => {
      this.seller = res.data.seller
      // console.log(this.seller.name)
    })
    // this.$nextTick(() => {
    //   this._initScroll()
    //   console.log(this.scroll)
    // })
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.sells, {
      scrollX: true
    })
  }
}
</script>

<style lang="stylus" scoped>
  .sells-wrapper
    position absolute
    width 100%
    height 100%
    left 0
    bottom 0
    top 174px
    /* z-index -9999*/
    overflow hidden
    .header-top
      display flex
      padding 18px
      position relative
      .top-left
        flex 1
        .title
          font-size 14px
          line-height 14px
          margin-bottom 8px
          color rgb(7,17,27)
        .star-wrapper
          display inline-block
          vertical-align middle
        .num
          margin-right 12px
          font-size 10px
          color rgb(77,85,93)
          line-height 18px
        .count
          font-size 5px
          color rgb(77,85,93)
          line-height 18px
      .like-food
        position absolute
        top 18px
        right 11px
        width 50px
        text-align center
        .commonlike
          display inline-block
          font-size 24px
          padding 0px 5px
          line-height 24px
          color #cacaca
          margin-bottom 4px
          &.like
            color red
        .text
          font-size 10px
          color rgb(77,85,93)
          line-height 10px
    .header-bottom
      display flex
      padding 18px 0
      .bottom
        flex 1
        text-align center
        border-right 1px solid #eaeaea
        &:last-child
          border-right none
        .text
          display inline-block
          font-size 10px
          color rgb(147,153,159)
          line-height 10px
          margin-bottom 4px
        .start-price
          font-size 24px
          color rgb(7,17,27)
          line-height 24px
          font-weight 200
  .activity
    padding 0 18px
    .title
      padding-top 18px
      font-size 14px
      line-height 14px
      margin-bottom 8px
      color rgb(7,17,27)
    .bulletin
      padding 0 12px 16px 12px
      font-size 12px
      line-height 24px
      color rgba(240,20,20,0.6)
    .detail-list
      .detail-item
        padding 16px 12px
        .icon
          display inline-block
          width 16px
          height 16px
          background-size 16px 16px
          vertical-align top
          margin-right 6px
          &.decrease
            background url("../../../resource/img/decrease_3@2x.png")
            width 16px
            height 16px
            background-size 16px 16px
          &.discount
            background url("../../../resource/img/discount_3@2x.png")
            width 16px
            height 16px
            background-size 16px 16px
          &.special
            background url("../../../resource/img/special_3@2x.png")
            width 16px
            height 16px
            background-size 16px 16px
          &.invoice
            background url("../../../resource/img/invoice_3@2x.png")
            width 16px
            height 16px
            background-size 16px 16px
          &.guarantee
            background url("../../../resource/img/guarantee_3@2x.png")
            width 16px
            height 16px
            background-size 16px 16px
        .text
          font-size 12px
          font-weight 200
          line-height 12px
  .pics
    padding 18px
    .title
      font-size 14px
      line-height 14px
      margin-bottom 12px
      color rgb(7,17,27)
    .pics-wrapper
      width 100%
      overflow: hidden
      white-space nowrap
      .pic-list
          font-size 0
        .pic-item
          display inline-block
          margin-right 6px
          &:last-child
            margin-right 0
  .info
    padding 0 18px
    .title
      padding 18px 0 12px 0
      font-size 14px
      line-height 14px
      color rgb(7,17,27)
    .info-list
      .info-item
        padding 16px 12px
        font-size 12px
        font-weight 200
        line-height 12px
</style>
